<template>
  <div class="product-item">
    <div class="box w-[96%] mx-auto p-1 transition-all duration-50">
      <div class="border-rounded-2xl overflow-hidden pos-relative themb">
        <router-link :to="'/product/detail/' + item?.id" target="_blank">
          <el-image
            :src="item.thumbnail"
            style="max-width: 100%; height: 100%"
            lazy
            @error="handleError"
        /></router-link>
      </div>
      <div class="pos-relative" style="height: 128px; z-index: 25">
        <div class="pos-relative">
          <div class="py-2">
            <router-link to="/">
              <h5 class="text-3.9 font-medium text-gray-700 text-ellipsis-2">
                {{ item.name }}
              </h5>
            </router-link>
          </div>

          <div class="skus flex" style="min-height: 42.5px">
            <div
              v-for="sku in item.skus"
              :key="sku.id"
              class="sku-item mr-1 border-1 border-rounded hover:border-red-5 p-0.5 cursor-pointer"
              @mouseenter="handleMouseEnter(item, sku)"
              style="width: 42.5px; height: 42.5px"
            >
              <el-image :src="sku.thumbnail" alt="" lazy />
            </div>
          </div>
          <div class="tags">
            <span></span>
          </div>
          <div class="flex items-baseline justify-between py-1">
            <div class="flex items-baseline">
              <Price :price="item.price" />
              <span v-if="true" class="ml-1 text-3 text-gray-600">到手价</span>
              <span v-else>销量<i>10万+</i></span>
            </div>
            <div class="" style="">
              <span
                style="width: 25px; height: 25px"
                class="bg-red-100 flex items-center justify-center border-rounded-2xl cursor-pointer hover:bg-red-200"
              >
                <el-icon color="red"><Plus /> </el-icon>
              </span>
            </div>
          </div>
          <div class="flex items-center py-2 border-t operation" style="line-height: 1">
            <Follow :item="item" :follow="isFollow" />
            <div
              class="flex items-center cursor-pointer"
              @click="handleAddComparison(item)"
            >
              <template v-if="isComparison">
                <el-icon color="red"><Goods /></el-icon>
              </template>
              <template v-else>
                <el-icon :color="isComparison ? 'red' : '#303133'"><Goods /> </el-icon>
              </template>
              <span class="text-3.5 ml-1">对比</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject, computed } from "vue";
import { Plus, Goods } from "@element-plus/icons-vue";
import Price from "@/components/common/Price.vue";
import Follow from "./Follow.vue";
import { storage } from "@/utils/storage";
import type { ProductInfo } from "@/api/types/product";

const emit = defineEmits<{
  (e: "comparison", item: ProductInfo): void;
}>();
const props = defineProps<{
  item: ProductInfo;
}>();
// 注入全局方法
const showComparisonDialog = inject("showComparisonDialog") as (
  item: ProductInfo
) => Promise<boolean>;

const isFollow = computed(() => {
  return true;
});
const handleAddComparison = async (item: any) => {
  console.log("添加对比");
  const confirmed = await showComparisonDialog(props.item);
  console.log("confirmed", confirmed);
  isComparison.value = confirmed;
  if (confirmed) {
    emit("comparison", props.item);
  }
};
const handleMouseEnter = (item: any, sku: any) => {
  item.img = sku.img;
  item.price = sku.price;
};

const handleError = (e: any) => {
  e.target.src =
    "https://img11.360buyimg.com/jdcms/s240x240_jfs/t20260821/330386/24/1628/535566/68a61250F3d200c27/de3d9595b680080d.png.avif";
};
const ComparisonList = ref<any[]>(storage.get("ComparisonList") || []);
const isComparison = ref(false);

onMounted(() => {
  if (!ComparisonList.value) return false;
  isComparison.value = ComparisonList.value.some(
    (item: any) => item.id === props.item.id
  );
});
</script>

<style scoped lang="scss">
.product-item {
  overflow: hidden;
  .box {
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid rgb(255, 255, 255);
      border-radius: 10px;
      z-index: 21;
    }
    .themb {
      z-index: 22;
    }
    &:hover {
      border-color: #ff4d4f;
      transform: scale(1.05);
      overflow: visible;
      z-index: 26;
      &:before {
        height: 110%;
        border: 1px solid rgb(248, 0, 0);
        background-color: #fff;
        z-index: 22;
      }
      .themb {
        z-index: 23;
      }
    }
  }
  .operation {
    display: none;
  }
  &:hover {
    overflow: visible;
    .operation {
      display: flex;
    }
  }
}
</style>
